import React, { Component } from 'react';
import { connect } from 'react-redux';

class Number extends Component {
    state = {  } 

    ClickHandle = () => {
        this.props.concat("baichen");
    }

    render() { 
        return (<React.Fragment>
            <h1>Number: {this.props.number}</h1>
            <button className='btn btn-warning' onClick={this.ClickHandle}>concat</button>
        </React.Fragment>);
    }
}

// 这里的state是每次dispatch更新后的state，每次更新后会调用此函数将组件中相应的值更新
const mapStateToProps = (state, props) => {
    return {
        number: state.number,
    }
}

// mapDispatchToProps的另一种写法，直接传递字典，字典中存储不同操作的函数，函数中返回dispatch的参数（也即action），调用字典中的函数时会自动调用dispatch
// 此种写法就是不用显式调用dispatch
const mapDispatchToProps = {
    concat: (message) => {
        return {
            type: "concat",
            message: message
        }
    }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(Number);